<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>幸运抽奖</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
      .gold-gradient { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
      .blue-gradient { background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%); }
      .red-gradient { background: linear-gradient(135deg, #FF5252 0%, #D32F2F 100%); }
      .lottery-shadow { box-shadow: 0 10px 30px rgba(22, 93, 255, 0.15); }
      .prize-gradient { background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%); }
      .coin-pulse { animation: coin-pulse 2s infinite; }
      
      @keyframes coin-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }

      /* 大奖动画效果 */
      .prize-1w { animation: prize-1w 1.2s infinite; }
      @keyframes prize-1w {
        0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 165, 0, 0.4); }
        50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(255, 165, 0, 0.6); }
      }
      
      .prize-10w { animation: prize-10w 1s infinite; }
      @keyframes prize-10w {
        0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 165, 0, 0.7); }
        50% { transform: scale(1.08); box-shadow: 0 0 35px rgba(255, 165, 0, 0.9); }
      }
      
      .prize-ultimate { animation: prize-ultimate 1.2s infinite; }
      @keyframes prize-ultimate {
        0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 165, 0, 0.6); }
        50% { transform: scale(1.15); box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 90px rgba(255, 165, 0, 0.8); }
      }

      /* 金币下落动画 */
      .coin-fall { animation: coin-fall 0.8s ease-out forwards; }
      @keyframes coin-fall {
        0% { transform: translateY(-50px) scale(0.5); opacity: 0; }
        70% { transform: translateY(10px) scale(1.1); opacity: 1; }
        100% { transform: translateY(0) scale(1); opacity: 1; }
      }

      /* 闪光效果 */
      .shine-effect {
        position: relative;
        overflow: hidden;
      }
      .shine-effect::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: rotate(30deg);
        animation: shine 2s infinite;
      }
      @keyframes shine {
        0% { transform: translateX(-100%) rotate(30deg); }
        100% { transform: translateX(100%) rotate(30deg); }
      }

      /* 烟花效果 */
      .firework {
        position: absolute;
        width: 8px; height: 8px;
        border-radius: 50%;
        animation: firework 1.2s ease-out forwards;
      }
      @keyframes firework {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(20); opacity: 0; }
      }

      .firework-burst {
        position: absolute;
        width: 4px; height: 4px;
        border-radius: 50%;
        animation: firework-burst 1s ease-out forwards;
      }
      @keyframes firework-burst {
        0% { transform: translate(0, 0) scale(1); opacity: 1; }
        100% { transform: translate(var(--tx), var(--ty)) scale(0.5); opacity: 0; }
      }

      /* 弹窗动画 */
      .modal-scale { animation: modal-scale 0.3s ease-in-out forwards; }
      @keyframes modal-scale {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }

      /* 数字滚动动画 */
      .number-scroll {
        transition: all 0.1s ease-out;
      }

      /* 奖励徽章动画 */
      .badge-pop {
        animation: badge-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      @keyframes badge-pop {
        0% { transform: scale(0); }
        70% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }
    }
  </style>
</head>

<body class="bg-gray-100 min-h-screen p-4 font-sans">
  <!-- 主容器 -->
  <div class="max-w-md mx-auto bg-white rounded-2xl lottery-shadow overflow-hidden relative">
    <!-- 顶部用户信息区 -->
    <header class="blue-gradient text-white py-4 px-5 relative">
      <!-- 右上角规则按钮 -->
      <button id="rules-btn" class="absolute top-3 right-3 z-10 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300">
        <i class="fa fa-question-circle"></i>
      </button>
      
      <!-- 标题区域 -->
      <div class="text-center mb-3">
        <h1 class="text-xl font-bold text-shadow">幸运抽奖</h1>
        <p class="text-white/80 text-sm mt-1" id="vip-tip">每日赠2万金币 | 单次耗1万</p>
      </div>
      
      <!-- 用户信息和金币区域 -->
      <div class="flex justify-between items-center bg-white/10 backdrop-blur-sm rounded-xl p-3">
        <div>
          <p class="text-white/80 text-sm">用户类型</p>
          <p class="text-lg font-bold mt-1" id="user-type">普通用户</p>
        </div>
        <div class="text-right">
          <p class="text-white/80 text-sm">当前金币</p>
          <p class="text-lg font-bold mt-1 flex items-center justify-end" id="current-coins">
            <i class="fa fa-diamond mr-1 text-yellow-400"></i>
            1000000
          </p>
        </div>
      </div>
    </header>

    <!-- 中部核心抽奖区 -->
    <main class="p-5">
      <!-- 实时中奖播报 -->
      <div class="bg-blue-50 rounded-xl p-3 mb-5">
        <p class="text-blue-600 text-sm font-medium mb-2 flex items-center">
          <i class="fa fa-bullhorn mr-1"></i> 实时中奖
        </p>
        <div class="overflow-hidden whitespace-nowrap" id="broadcast-container">
          <div class="inline-block animate-scroll" id="broadcast-text">
            用户小明中了10万金币 | 用户小花中了1000万金币 | 用户阿强中了100万金币 | 用户莉莉中了12000金币 | 
          </div>
        </div>
      </div>

      <!-- 抽奖说明 -->
      <div class="text-center mb-5">
        <h2 class="text-gray-800 font-bold text-lg">金币抽奖</h2>
        <p class="text-gray-500 text-sm mt-1">
          单次消耗 <span class="text-blue-600 font-medium">1万金币</span> 
          <span class="text-xs text-red-600" id="prob-tip">（当前为[友好模式]概率）</span>
        </p>
        <p class="text-gray-500 text-xs mt-2" id="remaining-lotteries">剩余可抽奖次数：100次</p>
        <p class="text-gray-400 text-xs mt-1" id="balance-alert" style="display:none;">
          警告：余额接近临界值，大奖概率已降低！
        </p>
      </div>

      <!-- 单个奖品展示区 -->
      <div class="mb-6">
        <div id="prize-display" class="prize-gradient rounded-2xl border-2 border-yellow-200 p-6 text-center transition-all duration-300 shadow-md">
          <div class="w-24 h-24 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner coin-pulse">
            <i class="fa fa-diamond text-yellow-500 text-4xl"></i>
          </div>
          <p id="prize-amount" class="text-gray-800 font-bold text-3xl number-scroll">点击开始</p>
          <p class="text-gray-600 text-sm mt-2">金币数将随机变换</p>
        </div>
      </div>

      <!-- 抽奖按钮 -->
      <div class="text-center mb-6">
        <button id="lottery-btn"
                class="gold-gradient text-gray-800 font-bold py-3 px-10 rounded-full shadow-lg transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-yellow-400/50 w-full max-w-xs">
          <i class="fa fa-play-circle mr-2"></i> 开始抽奖
        </button>
      </div>

      <!-- 通用提示弹窗 -->
      <div id="alert-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 overflow-hidden modal-scale">
          <div class="p-5 text-center">
            <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4" id="alert-icon">
              <i class="fa fa-exclamation-triangle text-red-500 text-2xl"></i>
            </div>
            <h3 id="alert-title" class="text-lg font-bold text-gray-800 mb-2">提示信息</h3>
            <p id="alert-message" class="text-gray-600 text-sm mb-5">这里将显示提示内容</p>
            <button id="alert-close"
                    class="blue-gradient text-white text-sm font-medium py-2.5 px-6 rounded-full w-full">
              我知道了
            </button>
          </div>
        </div>
      </div>

      <!-- 确认弹窗 -->
      <div id="confirm-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 overflow-hidden modal-scale">
          <div class="p-5 text-center">
            <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4" id="confirm-icon">
              <i class="fa fa-question-circle text-blue-500 text-2xl"></i>
            </div>
            <h3 id="confirm-title" class="text-lg font-bold text-gray-800 mb-2">确认操作</h3>
            <p id="confirm-message" class="text-gray-600 text-sm mb-5">这里将显示确认内容</p>
            <div class="flex gap-3">
              <button id="confirm-cancel"
                      class="bg-gray-200 text-gray-700 text-sm font-medium py-2.5 px-6 rounded-full flex-1">
                取消
              </button>
              <button id="confirm-ok"
                      class="blue-gradient text-white text-sm font-medium py-2.5 px-6 rounded-full flex-1">
                确认
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 中奖结果弹窗 -->
      <div id="result-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 overflow-hidden" id="modal-content">
          <div class="p-5 text-center">
            <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md"
                 id="modal-icon">
              <i class="fa fa-diamond text-yellow-400 text-3xl"></i>
            </div>
            <h3 id="modal-title" class="text-xl font-bold text-blue-600 mb-2">恭喜中了12000金币！</h3>
            <p id="modal-desc" class="text-gray-600 text-sm mb-5">金币已自动添加到您的账户</p>
            <button id="modal-close"
                    class="blue-gradient text-white text-sm font-medium py-2.5 px-6 rounded-full w-full">
              继续抽奖
            </button>
          </div>
        </div>
      </div>

      <!-- 累计奖励弹窗 -->
      <div id="milestone-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 overflow-hidden modal-scale">
          <div class="p-6 text-center">
            <div class="relative w-24 h-24 mx-auto mb-4">
              <div class="absolute inset-0 bg-yellow-100 rounded-full"></div>
              <div class="absolute inset-2 bg-yellow-400 rounded-full flex items-center justify-center badge-pop">
                <i class="fa fa-trophy text-white text-3xl"></i>
              </div>
            </div>
            <h3 id="milestone-title" class="text-xl font-bold text-blue-600 mb-2">达成累计抽奖目标！</h3>
            <p id="milestone-desc" class="text-gray-600 text-sm mb-5">您已累计抽奖10次，获得额外奖励</p>
            <div class="mb-6">
              <p class="text-gray-500 text-xs mb-1">获得奖励</p>
              <p class="text-yellow-600 font-bold text-2xl" id="milestone-reward">10,000 金币</p>
            </div>
            <button id="milestone-close"
                    class="blue-gradient text-white text-sm font-medium py-2.5 px-6 rounded-full w-full">
              领取奖励
            </button>
          </div>
        </div>
      </div>

      <!-- 规则弹窗 -->
      <div id="rules-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 p-5 modal-scale">
          <h3 class="text-xl font-bold text-blue-600 mb-3 text-center">抽奖规则</h3>
          <div class="text-gray-600 text-sm space-y-2 mb-5">
            <p>1. 每次抽奖消耗1万金币</p>
            <p>2. 点击"开始抽奖"后，金币数将随机快速变换</p>
            <p>3. 点击"停止抽奖"后，显示最终中奖金额</p>
            <p>4. 中奖金额低于1万视为未中奖</p>
            <p>5. 1万及以上金币为中奖，金额越高特效越华丽</p>
            <p>6. 累计抽奖可获得额外奖励</p>
          </div>
          <button id="rules-close" class="blue-gradient text-white text-sm font-medium py-2.5 px-6 rounded-full w-full">
            我知道了
          </button>
        </div>
      </div>

      <!-- 欢迎弹窗（首次弹窗） -->
      <div id="welcome-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl max-w-xs w-full mx-4 overflow-hidden modal-scale">
          <div class="p-5 text-center">
            <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
              <i class="fa fa-trophy text-yellow-500 text-3xl"></i>
            </div>
            <h3 class="text-xl font-bold text-blue-600 mb-2">欢迎来到幸运抽奖！</h3>
            <p class="text-gray-600 text-sm mb-5">您已获得100万初始金币（可抽100次），试试手气吧！</p>
            <button id="welcome-close" class="gold-gradient text-gray-800 text-sm font-medium py-2.5 px-6 rounded-full w-full">
              立即开始
            </button>
          </div>
        </div>
      </div>

      <!-- 累计抽奖进度 -->
      <div class="mb-1">
        <h3 class="text-gray-700 font-medium text-sm mb-3 flex items-center">
          <i class="fa fa-arrow-up text-blue-600 mr-1"></i> 累计抽奖奖励
        </h3>

        <!-- 进度1：10次 -->
        <div class="mb-3">
          <div class="flex justify-between items-center mb-1">
            <p class="text-xs text-gray-600">累计10次抽奖</p>
            <p class="text-xs font-medium text-blue-600" id="progress-10">0/10</p>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
            <div id="progress-10-bar"
                 class="bg-yellow-400 h-full rounded-full transition-all duration-500"
                 style="width: 0%"></div>
          </div>
          <p class="text-[10px] text-gray-500 mt-1">奖励：1万金币</p>
        </div>

        <!-- 进度2：50次 -->
        <div class="mb-3">
          <div class="flex justify-between items-center mb-1">
            <p class="text-xs text-gray-600">累计50次抽奖</p>
            <p class="text-xs font-medium text-blue-600" id="progress-50">0/50</p>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
            <div id="progress-50-bar"
                 class="bg-yellow-400 h-full rounded-full transition-all duration-500"
                 style="width: 0%"></div>
          </div>
          <p class="text-[10px] text-gray-500 mt-1">奖励：20万金币</p>
        </div>

        <!-- 进度3：200次 -->
        <div class="mb-3">
          <div class="flex justify-between items-center mb-1">
            <p class="text-xs text-gray-600">累计200次抽奖</p>
            <p class="text-xs font-medium text-blue-600" id="progress-200">0/200</p>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
            <div id="progress-200-bar"
                 class="bg-yellow-400 h-full rounded-full transition-all duration-500"
                 style="width: 0%"></div>
          </div>
          <p class="text-[10px] text-gray-500 mt-1">奖励：150万金币</p>
        </div>

        <!-- 进度4：500次 -->
        <div>
          <div class="flex justify-between items-center mb-1">
            <p class="text-xs text-gray-600">累计500次抽奖</p>
            <p class="text-xs font-medium text-blue-600" id="progress-500">0/500</p>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
            <div id="progress-500-bar"
                 class="bg-yellow-400 h-full rounded-full transition-all duration-500"
                 style="width: 0%"></div>
          </div>
          <p class="text-[10px] text-gray-500 mt-1">奖励：800万金币</p>
        </div>
      </div>
    </main>

    <!-- 底部兑换区 -->
    <footer class="bg-gray-50 p-4 border-t border-gray-200">
      <h3 class="text-gray-700 font-medium text-sm mb-3 flex items-center">
        <i class="fa fa-exchange text-red-600 mr-1"></i> 快捷兑换
      </h3>
      <div class="grid grid-cols-3 gap-3">
        <!-- 兑换金币 -->
        <button class="exchange-btn bg-white rounded-xl border border-gray-200 p-3 text-center transition-all duration-300 hover:border-red-600/30 hover:shadow-sm" data-type="coins">
          <div class="w-8 h-8 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fa fa-money text-red-600"></i>
          </div>
          <p class="text-gray-800 text-sm font-medium">兑换金币</p>
          <p class="text-gray-500 text-[10px] mt-1">95元 → 95万</p>
        </button>

        <!-- 永久VIP -->
        <button class="exchange-btn bg-white rounded-xl border border-gray-200 p-3 text-center transition-all duration-300 hover:border-red-600/30 hover:shadow-sm" data-type="vip">
          <div class="w-8 h-8 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fa fa-star text-red-600"></i>
          </div>
          <p class="text-gray-800 text-sm font-medium">永久VIP</p>
          <p class="text-gray-500 text-[10px] mt-1">398万金币</p>
        </button>

        <!-- 内部特训 -->
        <button class="exchange-btn bg-white rounded-xl border border-gray-200 p-3 text-center transition-all duration-300 hover:border-red-600/30 hover:shadow-sm" data-type="training">
          <div class="w-8 h-8 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fa fa-book text-red-600"></i>
          </div>
          <p class="text-gray-800 text-sm font-medium">内部特训</p>
          <p class="text-gray-500 text-[10px] mt-1">1980万金币</p>
        </button>
      </div>
    </footer>
  </div>

  <script>
    // 全局状态管理
    const state = {
      coins: 1000000,         // 当前金币
      totalDraws: 0,          // 累计抽奖次数
      isVip: false,           // 是否VIP
      isDrawing: false,       // 是否正在抽奖
      drawInterval: null,     // 抽奖定时器
      loseStreak: 0,          // 连续亏损次数
      winStreak: 0,           // 连续盈利次数
      dailyDraws: 0,          // 当日抽奖次数
      dividendBalance: 150    // 分红余额（初始设置为150元方便测试）
    };

    // DOM元素缓存
    const elements = {
      currentCoins: document.getElementById('current-coins'),
      remainingLotteries: document.getElementById('remaining-lotteries'),
      lotteryBtn: document.getElementById('lottery-btn'),
      resultModal: document.getElementById('result-modal'),
      modalContent: document.getElementById('modal-content'),
      modalTitle: document.getElementById('modal-title'),
      modalDesc: document.getElementById('modal-desc'),
      modalIcon: document.getElementById('modal-icon'),
      modalClose: document.getElementById('modal-close'),
      prizeAmount: document.getElementById('prize-amount'),
      prizeDisplay: document.getElementById('prize-display'),
      progress10: document.getElementById('progress-10'),
      progress10Bar: document.getElementById('progress-10-bar'),
      progress50: document.getElementById('progress-50'),
      progress50Bar: document.getElementById('progress-50-bar'),
      progress200: document.getElementById('progress-200'),
      progress200Bar: document.getElementById('progress-200-bar'),
      progress500: document.getElementById('progress-500'),
      progress500Bar: document.getElementById('progress-500-bar'),
      userType: document.getElementById('user-type'),
      vipTip: document.getElementById('vip-tip'),
      exchangeBtns: document.querySelectorAll('.exchange-btn'),
      broadcastText: document.getElementById('broadcast-text'),
      probTip: document.getElementById('prob-tip'),
      balanceAlert: document.getElementById('balance-alert'),
      rulesBtn: document.getElementById('rules-btn'),
      rulesModal: document.getElementById('rules-modal'),
      rulesClose: document.getElementById('rules-close'),
      welcomeModal: document.getElementById('welcome-modal'),
      welcomeClose: document.getElementById('welcome-close'),
      // 累计奖励弹窗元素
      milestoneModal: document.getElementById('milestone-modal'),
      milestoneTitle: document.getElementById('milestone-title'),
      milestoneDesc: document.getElementById('milestone-desc'),
      milestoneReward: document.getElementById('milestone-reward'),
      milestoneClose: document.getElementById('milestone-close'),
      // 通用弹窗元素
      alertModal: document.getElementById('alert-modal'),
      alertIcon: document.getElementById('alert-icon'),
      alertTitle: document.getElementById('alert-title'),
      alertMessage: document.getElementById('alert-message'),
      alertClose: document.getElementById('alert-close'),
      // 确认弹窗元素
      confirmModal: document.getElementById('confirm-modal'),
      confirmIcon: document.getElementById('confirm-icon'),
      confirmTitle: document.getElementById('confirm-title'),
      confirmMessage: document.getElementById('confirm-message'),
      confirmOk: document.getElementById('confirm-ok'),
      confirmCancel: document.getElementById('confirm-cancel')
    };

    // 显示提示弹窗
    function showAlert(title, message, icon = 'fa-exclamation-triangle', iconColor = 'text-red-500', bgColor = 'bg-red-50') {
      elements.alertTitle.textContent = title;
      elements.alertMessage.textContent = message;
      elements.alertIcon.className = `w-16 h-16 ${bgColor} rounded-full flex items-center justify-center mx-auto mb-4`;
      elements.alertIcon.innerHTML = `<i class="fa ${icon} ${iconColor} text-2xl"></i>`;
      
      elements.alertModal.classList.remove('hidden');
      const modalContent = elements.alertModal.querySelector('div');
      modalContent.classList.remove('modal-scale');
      void modalContent.offsetWidth; // 触发重绘
      modalContent.classList.add('modal-scale');
      
      return new Promise(resolve => {
        const closeHandler = () => {
          elements.alertModal.classList.add('hidden');
          elements.alertClose.removeEventListener('click', closeHandler);
          resolve();
        };
        elements.alertClose.addEventListener('click', closeHandler);
      });
    }

    // 显示确认弹窗
    function showConfirm(title, message, icon = 'fa-question-circle', iconColor = 'text-blue-500', bgColor = 'bg-blue-50') {
      elements.confirmTitle.textContent = title;
      elements.confirmMessage.textContent = message;
      elements.confirmIcon.className = `w-16 h-16 ${bgColor} rounded-full flex items-center justify-center mx-auto mb-4`;
      elements.confirmIcon.innerHTML = `<i class="fa ${icon} ${iconColor} text-2xl"></i>`;
      
      elements.confirmModal.classList.remove('hidden');
      const modalContent = elements.confirmModal.querySelector('div');
      modalContent.classList.remove('modal-scale');
      void modalContent.offsetWidth; // 触发重绘
      modalContent.classList.add('modal-scale');
      
      return new Promise((resolve) => {
        const okHandler = () => {
          elements.confirmModal.classList.add('hidden');
          elements.confirmOk.removeEventListener('click', okHandler);
          elements.confirmCancel.removeEventListener('click', cancelHandler);
          resolve(true);
        };
        
        const cancelHandler = () => {
          elements.confirmModal.classList.add('hidden');
          elements.confirmOk.removeEventListener('click', okHandler);
          elements.confirmCancel.removeEventListener('click', cancelHandler);
          resolve(false);
        };
        
        elements.confirmOk.addEventListener('click', okHandler);
        elements.confirmCancel.addEventListener('click', cancelHandler);
      });
    }

    // 获取当前适用的阈值（普通用户380万，VIP1900万）
    function getThreshold() {
      return state.isVip ? 19000000 : 3800000;
    }

    // 判断是否使用高余额概率
    function useHighBalanceProbability() {
      return state.coins >= getThreshold() * 0.5; // 达到阈值50%时启动压制
    }

    // 格式化金币显示
    function formatCoins(coins) {
      return coins.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    // 更新界面显示
    function updateUI() {
      // 更新金币和剩余次数
      elements.currentCoins.innerHTML = `<i class="fa fa-diamond mr-1 text-yellow-400"></i>${formatCoins(state.coins)}`;
      elements.remainingLotteries.textContent = `剩余可抽奖次数：${Math.floor(state.coins / 10000)}次`;
      
      // 更新概率状态提示
      const isHighBalance = useHighBalanceProbability();
      elements.probTip.textContent = `（当前为[${isHighBalance ? '消耗模式' : '友好模式'}]概率）`;
      
      // 显示余额警告
      elements.balanceAlert.style.display = state.coins >= getThreshold() * 0.8 ? 'block' : 'none';
      
      // 更新进度条
      const progress10 = Math.min(state.totalDraws, 10);
      elements.progress10.textContent = `${progress10}/10`;
      elements.progress10Bar.style.width = `${(progress10 / 10) * 100}%`;
      
      const progress50 = Math.min(state.totalDraws, 50);
      elements.progress50.textContent = `${progress50}/50`;
      elements.progress50Bar.style.width = `${(progress50 / 50) * 100}%`;
      
      const progress200 = Math.min(state.totalDraws, 200);
      elements.progress200.textContent = `${progress200}/200`;
      elements.progress200Bar.style.width = `${(progress200 / 200) * 100}%`;
      
      const progress500 = Math.min(state.totalDraws, 500);
      elements.progress500.textContent = `${progress500}/500`;
      elements.progress500Bar.style.width = `${(progress500 / 500) * 100}%`;
      
      // 更新用户类型显示
      elements.userType.textContent = state.isVip ? '永久VIP用户' : '普通用户';
      elements.vipTip.textContent = `${state.isVip ? '每日赠20万' : '每日赠2万'}金币 | 单次耗1万`;
    }

    // 生成随机金币数（1-1000万）
    function getRandomCoins() {
      // 根据概率调整大奖出现几率
      const isHighBalance = useHighBalanceProbability();
      let random = Math.random();
      
      // 高余额时降低大奖概率
      if (isHighBalance) {
        if (random < 0.7) {
          // 70%概率生成1-1万金币
          return Math.floor(Math.random() * 10000) + 1;
        } else if (random < 0.92) {
          // 22%概率生成1万-10万金币
          return Math.floor(Math.random() * 90000) + 10000;
        } else if (random < 0.98) {
          // 6%概率生成10万-100万金币
          return Math.floor(Math.random() * 900000) + 100000;
        } else if (random < 0.999) {
          // 1.9%概率生成100万-999万金币
          return Math.floor(Math.random() * 9000000) + 1000000;
        } else {
          // 0.1%概率生成1000万金币
          return 10000000;
        }
      } else {
        // 普通概率
        if (random < 0.6) {
          // 60%概率生成1-1万金币
          return Math.floor(Math.random() * 10000) + 1;
        } else if (random < 0.85) {
          // 25%概率生成1万-10万金币
          return Math.floor(Math.random() * 90000) + 10000;
        } else if (random < 0.97) {
          // 12%概率生成10万-100万金币
          return Math.floor(Math.random() * 900000) + 100000;
        } else if (random < 0.998) {
          // 2.8%概率生成100万-999万金币
          return Math.floor(Math.random() * 9000000) + 1000000;
        } else {
          // 0.2%概率生成1000万金币
          return 10000000;
        }
      }
    }

    // 开始抽奖动画（随机变换金币数）
    function startDrawAnimation() {
      // 逐渐加快速度
      let speed = 150;
      
      // 清除可能存在的定时器
      if (state.drawInterval) {
        clearInterval(state.drawInterval);
      }
      
      // 初始更新一次
      const randomCoins = getRandomCoins();
      elements.prizeAmount.textContent = formatCoins(randomCoins);
      
      // 设置定时器
      state.drawInterval = setInterval(() => {
        const randomCoins = getRandomCoins();
        elements.prizeAmount.textContent = formatCoins(randomCoins);
        
        // 逐渐加快
        if (speed > 50) {
          speed -= 2;
          clearInterval(state.drawInterval);
          state.drawInterval = setInterval(() => {
            const randomCoins = getRandomCoins();
            elements.prizeAmount.textContent = formatCoins(randomCoins);
          }, speed);
        }
      }, speed);
    }

    // 停止抽奖动画并返回结果
    function stopDrawAnimation() {
      if (state.drawInterval) {
        clearInterval(state.drawInterval);
        state.drawInterval = null;
      }
      const finalCoins = getRandomCoins();
      elements.prizeAmount.textContent = formatCoins(finalCoins);
      return finalCoins;
    }

    // 创建终极烟花效果
    function createUltimateFireworks() {
      const container = document.createElement('div');
      container.style.position = 'fixed';
      container.style.inset = '0';
      container.style.pointerEvents = 'none';
      container.style.zIndex = '60';
      document.body.appendChild(container);
      
      // 创建20个主烟花
      for (let i = 0; i < 20; i++) {
        setTimeout(() => {
          // 主烟花爆炸点
          const firework = document.createElement('div');
          firework.className = 'firework';
          
          // 随机金色系颜色
          const colors = ['#FFD700', '#FFA500', '#FFC107', '#FFD54F', '#FFECB3', '#FFF3E0'];
          const color = colors[Math.floor(Math.random() * colors.length)];
          firework.style.backgroundColor = color;
          
          // 随机位置
          const left = Math.random() * 80 + 10;
          const top = Math.random() * 60 + 20;
          firework.style.left = `${left}%`;
          firework.style.top = `${top}%`;
          
          container.appendChild(firework);
          
          // 烟花爆炸效果 - 生成多个粒子
          setTimeout(() => {
            for (let j = 0; j < 30; j++) {
              const particle = document.createElement('div');
              particle.className = 'firework-burst';
              particle.style.backgroundColor = color;
              particle.style.left = `${left}%`;
              particle.style.top = `${top}%`;
              
              // 随机粒子轨迹
              const angle = Math.random() * Math.PI * 2;
              const distance = Math.random() * 100 + 50;
              particle.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
              particle.style.setProperty('--ty', `${Math.sin(angle) * distance}px`);
              
              container.appendChild(particle);
              
              // 粒子消失后移除
              setTimeout(() => {
                if (container.contains(particle)) {
                  container.removeChild(particle);
                }
              }, 1000);
            }
          }, 500);
          
          // 主烟花消失后移除
          setTimeout(() => {
            if (container.contains(firework)) {
              container.removeChild(firework);
            }
          }, 1200);
        }, i * 300);
      }
      
      // 所有烟花结束后移除容器
      setTimeout(() => {
        if (document.body.contains(container)) {
          document.body.removeChild(container);
        }
      }, 8000);
    }

    // 创建下落的金币动画
    function createFallingCoins(count = 10) {
      const container = document.createElement('div');
      container.style.position = 'fixed';
      container.style.inset = '0';
      container.style.pointerEvents = 'none';
      container.style.zIndex = '60';
      document.body.appendChild(container);
      
      // 创建多个金币
      for (let i = 0; i < count; i++) {
        const coin = document.createElement('div');
        coin.innerHTML = '<i class="fa fa-diamond text-yellow-400 text-xl"></i>';
        coin.style.position = 'absolute';
        coin.style.top = `-${Math.random() * 50 + 20}px`;
        coin.style.left = `${Math.random() * 100}vw`;
        coin.style.animation = `coin-fall ${Math.random() * 0.5 + 0.8}s ease-out forwards`;
        coin.style.animationDelay = `${i * 0.1}s`;
        container.appendChild(coin);
      }
      
      // 动画结束后移除容器
      setTimeout(() => {
        if (document.body.contains(container)) {
          document.body.removeChild(container);
        }
      }, 2000);
    }

    // 添加大奖动画 - 根据金额分级显示不同特效
    function addPrizeEffectsByAmount(amount) {
      // 清除之前的动画类
      elements.modalIcon.classList.remove('prize-1w', 'prize-10w', 'prize-ultimate', 'shine-effect');
      elements.modalContent.classList.remove('prize-1w', 'prize-10w', 'prize-ultimate', 'shine-effect');
      
      // 根据金额应用不同动画效果
      if (amount >= 100000) {
        // 10万及以上 - 终极特效（包含烟花）
        elements.modalIcon.classList.add('prize-ultimate', 'shine-effect');
        elements.modalContent.classList.add('prize-ultimate');
        createFallingCoins(40); // 更多金币
        createUltimateFireworks(); // 终极烟花
      } else if (amount >= 10000) {
        // 1万-99999 - 基础特效
        elements.modalIcon.classList.add('prize-1w');
        elements.modalContent.classList.add('prize-1w');
        createFallingCoins(5);
      }
      // 1万以下无特效，不做处理
    }

    // 显示中奖弹窗
    function showPrizeModal(amount) {
      let title, desc, icon;
      
      if (amount < 10000) {
        // 未中奖（1万以下）- 无任何特效
        title = '很遗憾';
        desc = '本次未中奖，再接再厉哦！';
        icon = 'fa-meh-o text-gray-400';
        
        // 确保清除所有可能的特效类
        elements.modalIcon.classList.remove('prize-1w', 'prize-10w', 'prize-ultimate', 'shine-effect');
        elements.modalContent.classList.remove('prize-1w', 'prize-10w', 'prize-ultimate', 'shine-effect');
      } else {
        // 中奖（1万及以上）- 根据金额显示不同特效
        title = `恭喜获得${formatCoins(amount)}金币！`;
        desc = '金币已自动添加到您的账户';
        icon = 'fa-trophy text-yellow-500';
      }
      
      elements.modalTitle.textContent = title;
      elements.modalDesc.textContent = desc;
      elements.modalIcon.innerHTML = `<i class="fa ${icon} text-3xl"></i>`;
      
      // 显示弹窗并添加基础动画
      elements.resultModal.classList.remove('hidden');
      elements.modalContent.classList.remove('modal-scale');
      void elements.modalContent.offsetWidth; // 触发重绘
      elements.modalContent.classList.add('modal-scale');
      
      // 只有1万及以上才添加中奖特效
      if (amount >= 10000) {
        addPrizeEffectsByAmount(amount);
      }
      
      // 绑定关闭事件
      const closeHandler = () => {
        elements.resultModal.classList.add('hidden');
        elements.modalContent.classList.remove('modal-scale');
        elements.lotteryBtn.disabled = false;
        elements.lotteryBtn.innerHTML = '<i class="fa fa-play-circle mr-2"></i> 开始抽奖';
        elements.lotteryBtn.classList.remove('opacity-80', 'cursor-not-allowed');
        elements.modalClose.removeEventListener('click', closeHandler);
      };
      
      elements.modalClose.addEventListener('click', closeHandler);
    }

    // 显示累计奖励弹窗
    function showMilestoneModal(totalDraws, reward) {
      let message = '';
      
      if (totalDraws === 10) {
        message = '您已累计抽奖10次，获得额外奖励';
      } else if (totalDraws === 50) {
        message = '您已累计抽奖50次，获得丰厚奖励';
      } else if (totalDraws === 200) {
        message = '您已累计抽奖200次，获得高级奖励';
      } else if (totalDraws === 500) {
        message = '您已累计抽奖500次，获得终极大奖';
      }
      
      elements.milestoneTitle.textContent = '达成累计抽奖目标！';
      elements.milestoneDesc.textContent = message;
      elements.milestoneReward.textContent = `${formatCoins(reward)} 金币`;
      
      // 显示弹窗并添加动画
      elements.milestoneModal.classList.remove('hidden');
      
      // 创建庆祝效果
      createFallingCoins(15);
      
      // 绑定关闭事件
      const closeHandler = () => {
        elements.milestoneModal.classList.add('hidden');
        elements.milestoneClose.removeEventListener('click', closeHandler);
      };
      
      elements.milestoneClose.addEventListener('click', closeHandler);
    }

    // 检查累计奖励
    function checkMilestones() {
      let reward = 0;
      
      if (state.totalDraws === 10) {
        reward = 10000;
      } else if (state.totalDraws === 50) {
        reward = 200000;
      } else if (state.totalDraws === 200) {
        reward = 1500000;
      } else if (state.totalDraws === 500) {
        reward = 8000000;
      }
      
      if (reward > 0) {
        state.coins += reward;
        updateUI();
        showMilestoneModal(state.totalDraws, reward);
      }
    }

    // 执行抽奖（切换开始/停止状态）
    function toggleLottery() {
      if (!state.isDrawing) {
        // 开始抽奖
        // 检查金币是否足够
        if (state.coins < 10000) {
          showAlert('金币不足', '您的金币不足1万，无法抽奖，请先兑换金币');
          return;
        }
        
        state.isDrawing = true;
        elements.lotteryBtn.innerHTML = '<i class="fa fa-stop-circle mr-2"></i> 停止抽奖';
        elements.lotteryBtn.classList.remove('opacity-80', 'cursor-not-allowed');
        elements.lotteryBtn.disabled = false; // 允许点击停止
        
        // 扣除金币
        state.coins -= 10000;
        updateUI();
        
        // 开始动画
        startDrawAnimation();
      } else {
        // 停止抽奖
        state.isDrawing = false;
        elements.lotteryBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 计算结果...';
        elements.lotteryBtn.disabled = true;
        
        // 停止动画并获取结果
        const finalAmount = stopDrawAnimation();
        
        // 更新累计次数
        state.totalDraws += 1;
        state.dailyDraws += 1;
        
        // 增加金币
        state.coins += finalAmount;
        
        // 更新连续赢/输次数
        if (finalAmount >= 10000) {
          state.winStreak++;
          state.loseStreak = 0;
        } else {
          state.loseStreak++;
          state.winStreak = 0;
        }
        
        // 更新界面
        updateUI();
        checkMilestones();
        
        // 显示结果弹窗
        setTimeout(() => {
          showPrizeModal(finalAmount);
        }, 500);
      }
    }

    // 处理兑换操作
    async function handleExchange(type) {
      switch(type) {
        case 'coins':
          // 兑换金币逻辑
          if (state.dividendBalance <= 0) {
            await showAlert(
              '分红余额不足', 
              '您的分红余额为0，无法兑换金币', 
              'fa-money', 
              'text-orange-500', 
              'bg-orange-50'
            );
          } else {
            // 计算可兑换的金币数量（1元 = 1万金币）
            const exchangeableCoins = state.dividendBalance * 10000;
            
            // 显示分红兑换确认弹窗
            const confirm = await showConfirm(
              '兑换金币', 
              `您有${state.dividendBalance}元分红，可兑换${formatCoins(exchangeableCoins)}金币，是否确认兑换？`, 
              'fa-money', 
              'text-green-500', 
              'bg-green-50'
            );
            
            if (confirm) {
              // 执行兑换
              state.coins += exchangeableCoins;
              state.dividendBalance = 0; // 兑换后清空分红
              updateUI();
              await showAlert(
                '兑换成功', 
                `成功兑换${formatCoins(exchangeableCoins)}金币！`, 
                'fa-check-circle', 
                'text-green-500', 
                'bg-green-50'
              );
            }
          }
          break;
          
        case 'vip':
          // 永久VIP兑换逻辑
          if (state.isVip) {
            await showAlert(
              '已是VIP', 
              '您已经是永久VIP用户了', 
              'fa-star', 
              'text-yellow-500', 
              'bg-yellow-50'
            );
          } else if (state.coins >= 3980000) {
            const confirm = await showConfirm(
              '兑换永久VIP', 
              `确定要消耗${formatCoins(3980000)}金币兑换永久VIP吗？成为VIP可每日领取20万金币`, 
              'fa-star', 
              'text-yellow-500', 
              'bg-yellow-50'
            );
            
            if (confirm) {
              state.coins -= 3980000;
              state.isVip = true;
              updateUI();
              await showAlert(
                '兑换成功', 
                '恭喜您成为永久VIP用户！每日可领取20万金币！', 
                'fa-check-circle', 
                'text-green-500', 
                'bg-green-50'
              );
            }
          } else {
            await showAlert(
              '金币不足', 
              `金币不足${formatCoins(3980000)}，无法兑换永久VIP`, 
              'fa-exclamation-circle', 
              'text-red-500', 
              'bg-red-50'
            );
          }
          break;
          
        case 'training':
          // 内部特训兑换逻辑
          if (state.coins >= 19800000) {
            const confirm = await showConfirm(
              '兑换内部特训', 
              `确定要消耗${formatCoins(19800000)}金币兑换内部特训课程吗？`, 
              'fa-book', 
              'text-purple-500', 
              'bg-purple-50'
            );
            
            if (confirm) {
              state.coins -= 19800000;
              updateUI();
              await showAlert(
                '兑换成功', 
                '恭喜您成功兑换内部特训课程！我们将尽快与您联系', 
                'fa-check-circle', 
                'text-green-500', 
                'bg-green-50'
              );
            }
          } else {
            await showAlert(
              '金币不足', 
              `金币不足${formatCoins(19800000)}，无法兑换内部特训`, 
              'fa-exclamation-circle', 
              'text-red-500', 
              'bg-red-50'
            );
          }
          break;
      }
    }

    // 初始化广播动画
    function initBroadcast() {
      let position = 0;
      setInterval(() => {
        position -= 2;
        if (position < -elements.broadcastText.offsetWidth) {
          position = window.innerWidth;
        }
        elements.broadcastText.style.transform = `translateX(${position}px)`;
      }, 30);
    }

    // 初始化事件
    function initEvents() {
      // 抽奖按钮
      elements.lotteryBtn.addEventListener('click', toggleLottery);
      elements.lotteryBtn.disabled = false; // 默认启用
      
      // 规则按钮
      elements.rulesBtn.addEventListener('click', () => {
        elements.rulesModal.classList.remove('hidden');
        const modalContent = elements.rulesModal.querySelector('div');
        modalContent.classList.remove('modal-scale');
        void modalContent.offsetWidth; // 触发重绘
        modalContent.classList.add('modal-scale');
      });
      
      // 关闭规则弹窗
      elements.rulesClose.addEventListener('click', () => {
        elements.rulesModal.classList.add('hidden');
      });
      
      // 关闭欢迎弹窗
      elements.welcomeClose.addEventListener('click', () => {
        elements.welcomeModal.classList.add('hidden');
      });
      
      // 兑换按钮
      elements.exchangeBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const type = btn.getAttribute('data-type');
          handleExchange(type);
        });
      });
      
      // 每日重置抽奖次数（简单模拟）
      const resetDailyDraws = () => {
        state.dailyDraws = 0;
        // 每日赠送金币
        const dailyGift = state.isVip ? 200000 : 20000;
        state.coins += dailyGift;
        updateUI();
        showAlert(
          '每日奖励', 
          `每日奖励已发放：${formatCoins(dailyGift)}金币`, 
          'fa-gift', 
          'text-green-500', 
          'bg-green-50'
        );
      };
      
      // 模拟每天0点重置（实际项目中应使用服务器时间）
      const now = new Date();
      const tomorrow = new Date(now);
      tomorrow.setDate(now.getDate() + 1);
      tomorrow.setHours(0, 0, 0, 0);
      const timeToMidnight = tomorrow - now;
      setTimeout(resetDailyDraws, timeToMidnight);
    }

    // 初始化
    function init() {
      updateUI();
      initEvents();
      initBroadcast();
    }

    // 启动
    init();
  </script>
</body>

</html>
